<template>
  <div class="all-container">
    <div class="all-left">
      <div class="card">
        <div slot="header" class="clearfix">
          <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">博客首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">个人详情页</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mid">
          <img  class="person-img" :src="this.userList.userPic"/>
          <div class="container">
            <div class="info">
                  <p class="name">{{userList.name}}</p>
                  <p class="introduction">{{userList.hobby}}</p>
                  <p class="account">{{userList.email}}</p>
            </div>
            <div class="data">
                  <div class="followers">
                      <img class="followers-icon" src="@/assets/mime/followers.png"/>
                      <div class="followers-info">
                          <p class="info-name">关注者</p>
                          <p class="info-number">14</p>
                      </div>
                  </div>
                  <div class="visits">
                      <img class="visits-icon" src="@/assets/mime/visits.png"/>
                      <div class="visits-info">
                        <p class="info-name">访问数量</p>
                          <p class="info-number">102</p>
                      </div>
                  </div>
                  <div class="articles">
                      <img class="articles-icon" src="@/assets/mime/articles.png"/>
                      <div class="articles-info">
                          <p class="info-name">柠文总数</p>
                          <p class="info-number">6</p>
                      </div>
                  </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <el-button type="success" plain @click="register">! 修改信息</el-button>
          <el-button type="success" plain @click="register">+ 新建文章</el-button>
        </div>
      </div>
      <Persondata></Persondata>
    </div>
    <div class="all-right">
      <Personarticle></Personarticle>
    </div>
    <!-- <Personcard></Personcard> -->
  </div>
</template>
<script>
// 导入组件
// import Personcard from "./components/personcard";
import Persondata from "./components/persondata.vue";
import Personarticle from "./components/personarticle.vue";
import Item from "./components/item.vue";
import { getUserProfile } from '@/api/user.js'

export default {
  name: 'personItem',
  // 接收父组件传入的参数
  props: {},
  // 注册组件
  components: {
    // Personcard,
    Persondata,
    Personarticle,
    Item
  },
  // 数据
  data () {
    return {
      userList: {
        birth: "",
        createTime: "",
        email: "",
        hobby: "",
        id: "",
        institute: "",
        name: "",
        password: "",
        phoneNumber: "",
        sex: "",
        specialty: "",
        totalTime: "",
        userPic: "",
      }
    }
  },
  // 属性值计算
  computed: {},
  // 数据侦听
  watch: {},
  // vue实例被创建时
  created() {
    this.loadUser()
  },
  // vue实例被挂载至dom上时
  mounted () {},
  // 实例方法
  methods: {
    //获取用户信息
    loadUser() {
      getUserProfile().then(res => {
        this.userList = res.data.data
        console.log(this.userList)
      });
    },
    //新建文章
    register() {
      console.log("新建文章")
    }
  },
  // keep-alive之后页面会缓存，不会执行created(),和mounted(),但是会执行activated()
  activated () {},
  // 退出的生命周期钩子
  deactivated () {},
  // 销毁
  destroyed () {},
}
</script>
<style lang='less' scoped>
.all-left {
  display: inline-block;
  .card {
  height: 58vh;
  width: 32vw;
  background: transparent;
  position: relative;
  .clearfix {
    position: absolute;
    top: 2vh;
    height: 0.2vh;
    width: 15vw;
  }
  .mid {
    height: 40vh;
    width: 32vw;
    position: absolute;
    top: 6vh;
    .person-img{
      height: 15.1vh;
      width: 15.1vh;
      position: absolute;
      top: -1vh;
      left: 11vw;
      border-radius: 50%;
      z-index: 1;
    }
    .container{
      height: 37vh;
      width: 32vw;
      position: absolute;
      top: 3vh;
      border-radius: 15px;
      background: transparent;
      box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 25%);
      .info {
        position: absolute;
        top: 15vh;
        left: 7vw;
        height: 11vh;
        width: 17.2vw;
          .name {
              font-size: 24px;
              font-weight: 400;
              color: rgba(13, 128, 120, 1);
              text-align: center;
              margin: 1vh 0;
          }
          .introduction {
            font-size: 14px;
            font-weight: 400;
            color: #505050;
            text-align: center;
            margin: 0vh 0;
          }
          .account {
              font-size: 18px;
              font-weight: 400;
              color: rgba(183, 183, 183, 1);
              text-align: center;
              margin: 1vh 0;
          }
          .details {
              width: 185px;
              height: 50px;
              border-radius: 15px;
              font-size: 20px;
              background-color: #0d8078;
              margin: 0 auto;
              margin: 2.5vh 2vw 0vw 4vh;
          }
      }
      .data {
          position: absolute;
          top: 26vh;
          height: 11vh;
          width: 32vw;
          display:flex;
          justify-content:space-around;
          align-items: center;
          .followers {
            height: 7.6vh;
            width: 12.6vw;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 1vw;
              .followers-icon {
                height: 3vh;
                width: 3vh;
              }
              .followers-info {
                  display: flex;  
                  flex-direction: column-reverse;
                  float: left;
                  .info-number {
                    font-size: 16px;
                    font-weight: 400;
                    color: #00baad;
                    margin: 0vh 0vw 3vh -2.5vw;
                  }
                  .info-name {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(111, 111, 111, 1);
                      margin: -8vh 0vw 0vh -3vw;
                  }
              }
          }
          .visits {
              height: 11.6vh;
              width: 13.6vw;
              display:flex;
              justify-content:space-around;
              align-items: center;
              margin-left: -1vw;
              .visits-icon {
                height: 3vh;
                width: 3vh;
              }
              .visits-info {
                  display: flex;  
                  flex-direction: column-reverse;
                  float: left;
                  .info-number {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 186, 173, 1);
                      margin: 0vh 0vw 0vh -2vw;
                  }
                  .info-name {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(111, 111, 111, 1);
                      margin: -5vh 0vw -0vh -3vw;
                  }
              }
          }
          .articles {
              height: 11.6vh;
              width: 14.6vw;
              display:flex;
              justify-content:space-around;
              align-items: center;
              margin-right: 1vw;
              .articles-icon {
                height: 3vh;
                width: 3vh;
              }
              .articles-info {
                  display: flex;  
                  flex-direction: column-reverse;
                  // float: left;
                  .info-number {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 186, 173, 1);
                      margin: 0vh 0vw -5vh -3.5vw;
                  }
                  .info-name {
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(111, 111, 111, 1);
                      margin: 0vh 0vw 0vh -4vw;
                  }
              }
          }
      }
    }
  }
  .bottom {
    width: 21vw;
    height: 7.2vh;
    position: absolute;
    bottom: 2.5vh;
    left: 8vw;
    .el-button--success.is-plain {
          color: #fff;
          border-radius: 14px;
          background: rgba(67, 207, 124, 1);
          margin-right: 1vw;
      }
  }
}
}
</style>